<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本列表</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表</h2>
            <ul>
                <!-- p是每个对象，index是在数组中的下标 :key 绑定一个唯一值，也可以用下标:key="index" -->
                <!-- 也可以用of  <li v-for="(p,index) of personsArr" :key="p.id"> -->
                <li v-for="(p,index) in personsArr" :key="p.id">
                    {{p.name}} - {{p.age}}
                </li>
            </ul>

            <!-- 遍历对象 -->
            <h2>汽车信息</h2>
            <ul>
                <!-- 注意前面是value，后面是key -->
                <li v-for="(val,key) in car" :key="key">
                    {{key}} - {{val}}
                </li>
            </ul>

            <!-- 遍历字符串 -->
            <h2>遍历字符串</h2>
            <ul>
                <!-- 注意前面是字符，后面是下标 -->
                <li v-for="(char,index) in str" :key="index">
                    {{index}} - {{char}}
                </li>
            </ul>

            <!-- 遍历指定次数 -->
            <h2>遍历指定次数</h2>
            <ul>
                <!-- 注意前面是数字，后面是下标 -->
                <li v-for="(number,index) in 5" :key="index">
                    {{index}} - {{number}}
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', 
                data:{  
                    personsArr:[
                        {id:'001',name:'张三',age:18},
                        {id:'002',name:'李四',age:19},
                        {id:'003',name:'王五',age:20},
                    ],
                    car:{
                        name:'领克',
                        price:200000,
                        color:'white'
                    },
                    str:'qwertyuiop'
                }
            })
        </script>

        
    </body>
</html>